<template>
<el-drawer :title="formDrawer.title" :visible.sync="formDrawer.visible" direction="rtl" custom-class="drawer-right-side" :wrapperClosable="false" :before-close="closeDrawer" :size="`${widthPercent}%`" append-to-body>
    <div class="ruleForm">
        <order-vip ref="orderVipRef"></order-vip>

        <order-bom ref="orderBomRef"></order-bom>

        <order-income ref="orderIncomeRef"></order-income>

        <div class="fixed-bottom" :style="`width: ${widthPercent}vw;`">
            <el-button type="primary" @click="next">提交</el-button>
        </div>
    </div>
</el-drawer>
</template>

<script>
import {
    createOrderApi
} from "@/api/order/order.js";

import orderVip from './component/order-vip.vue';
import orderBom from './component/order-bom.vue';
import orderIncome from './component/order-income.vue'

const ruleForm = {
    member_id: '',
    allocate_id: '',
    source_id: '',
};

export default {
    components: {
        orderVip,
        orderBom,
        orderIncome
    },
    data() {
        return {
            formDrawer: {
                title: "创建订单",
                visible: false,
            },
            widthPercent: 30,
            forms: [{
                ref: 'orderVipRef',
                form: 'vip'
            }, {
                ref: 'orderBomRef',
                form: 'bom'
            }, {
                ref: 'orderIncomeRef',
                form: 'income'
            }],
            ruleForm: {},
        };
    },
    methods: {
        showDrawer(member_id, allocate_id, source_id) {
            this.formDrawer.visible = true;
            this.ruleForm = JSON.parse(JSON.stringify(ruleForm));
            this.ruleForm.member_id = member_id;
            this.ruleForm.allocate_id = allocate_id;
            this.ruleForm.source_id = parseInt(source_id);
            this.$nextTick(() => {
                this.$refs['orderBomRef'].clearFiles ();
                this.$refs['orderIncomeRef'].clearFiles ();
            })
        },
        closeDrawer() {
            this.formDrawer.visible = false;
            this.$refs['orderBomRef'].clearFiles();
            this.$refs['orderIncomeRef'].clearFiles();
        },
        next() {
            let forms = this.forms.map(item => this.$refs[item.ref]);
            let promises = forms.map(form => form.submit());

            Promise.all(promises)
                .then(() => {
                    this.$confirm('确认提交订单?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        // 提交订单
                        this.doSubmit();

                    }).catch((res) => {
                        console.log(res);
                        this.$message({
                            type: 'info',
                            message: '异常操作'
                        });
                    });
                })
                .catch(error => {});
        },
        doSubmit() {

            let data = {};
            data['order'] = this.ruleForm;
            this.forms.forEach(item => {
                data[item.form] = this.$refs[item.ref].ruleForm;
            });

            createOrderApi(data).then((res) => {
                if (res.code == "200") {
                    this.$message.success(res.msg);
                    this.closeDrawer()

                    this.$router.push({
                        path: '/order/index'
                    });

                } else {
                    this.$message.warning(res.msg);
                }
            });
        },
    },
};
</script>

<style>
.step-box {
    padding: 20px;
}
</style>././components/order-income.v./components/order-product.vueuecomponents/order-base.vue./components/order-customer.vue./components/order-bom.vue./components/order-bom-1.vue./components/order-bom.vue
